<template>
  <div class='sub-category'>
    <div class="container">
      <!-- 面包屑导航 -->
      <SubHead :subCate="subCate" />
      <!-- 过滤筛选区域 -->
      <SubFilter :subCate="subCate" @filter-change="hFilterChange" />

      <div class="goods-list">
        <!-- 排序区域 -->
        <SubSort @sort-change="hSortChange" />

        <!-- 显示结果 -->
        <div class="sort-list-container">
          <GoodsItem v-for="good in goodsList" :key="good.id" :good="good" />
        </div>
        <XtxInfinteLoading :isLoading="isLoading" :isFinished="isFinished" @load="loadData" />
      </div>
    </div>
  </div>
</template>

<script>
import SubHead from './components/sub-bread.vue'
import SubFilter from './components/sub-filter.vue'
import SubSort from './components/sub-sort.vue'
import GoodsItem from './components/goods-item.vue'

import { useSubCate, useLoadData } from './serve/sub.js'

export default {
  name: 'SubCategory',
  components: { SubHead, SubFilter, SubSort, GoodsItem },
  setup () {
    const { subCate } = useSubCate()
    const { isFinished, isLoading, loadData, goodsList, hFilterChange, hSortChange } = useLoadData()

    return { subCate, goodsList, hFilterChange, hSortChange, loadData, isLoading, isFinished }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
.sort-list-container {
  display: flex;
  flex-wrap: wrap;
}
</style>
